<template>
	<div >
		<div class="rec_bk"></div>
		<div>
			<el-row type="flex"  align="middle" justify="center" style="margin-bottom:4rem;">
				<el-col :xs="16" :sm="12" :md="11" :lg="11" :xl="9" :offset="1" align="middle" style="margin-top:10rem;" class=" animate__animated animate__fadeInLeft" >
					<p style="color:white;font-size:2.4rem;">欢迎加入</p>
					<!-- <editor style="500px"></editor> -->
				</el-col>
			</el-row>
			<el-row type="flex"  align="middle" justify="center" style="margin-bottom:5rem;">
				<el-col :xs="20" :sm="12" :md="11" :lg="9" :xl="9"  align="middle"  class=" animate__animated animate__fadeInLeft" >
					<span style="color:white;font-size:1.4rem;">我们不生产学霸（bushi），我们只是学霸们的坚实后盾</span>
					
				</el-col>
			</el-row >
			<el-row type="flex" align="middle" justify="center">
				<el-col :xs="24" :sm="20" :md="22" :lg="18" :xl="18"  align="middle" class=" animate__animated animate__fadeInLeft" >
					<el-card class="card">
						<el-carousel :interval="4000" :type="isCard" :height="hdgd" style="margin-top: 3rem;">
							<el-carousel-item v-for="item in imgtext" :key='item.index'>
									<el-image  :src='item.src' style="width: 100%;"></el-image>
							</el-carousel-item>
						</el-carousel>		
					</el-card>
				</el-col>
			</el-row>
			
		</div>
		
	</div>
</template>

<script>
	
	import editor  from '../components/editor.vue' 
export default {
	components: {
	  editor
	  
	},
		name: 'timeline',
		data: function() {
			return {
				imgtext: [
					{
						src: require('../assets//img/re1.jpg')
					},
					{
						src: require('../assets//img/re2.jpg')
					},
					{
						src: require('../assets//img/re3.jpg')
					},
					{
						src: require('../assets//img/re4.jpg')
					}
				],
				aaa:{
					multipartFile:"abc"
				},
				hdgd: '',
				isCard:"card",
				imageUrl:''
			};
		},
		methods:{
			text22:async function(){
				let res = await this.text("user/getAvatar")
				
			},
			handleAvatarSuccess(res, file) {
			        this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg';
				// const isPNG = file.type === 'image/png';
				const isLt2M = file.size / 1024 / 1024 < 2;
		
		// 		if (!isJPG && !isPNG) {
		// 		  this.$message.error('上传头像图片只能是 JPG 格式!');
		// 		}
				if (!isLt2M) {
				  this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			 }
		},
		mounted() {
			
			
			let that = this;
			// window.onresize = function windowResize() {
			  // 通过捕获系统的onresize事件触发我们需要执行的事件
			  let w = window.innerWidth
			  let h = 0.55 * w
			  
			  
			  that.hdgd = h + 'px'
			  
			// }
		 }
	}
</script>

<style scoped>
.rec_bk{
		width: 100%;
		height: 100%;
		position: fixed;
		/* background-image: url(../assets//img/9.jpg); */
		background-color: rgba(77, 50, 90, 0.473);
		/* background-color: white; */
		background-size: cover;
		background-attachment: fixed;
}
.card{
		background-color: rgba(255, 255, 255, 0.1);
		border: 0;
	}
	
	avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
